import React, { useEffect } from "react";
import { Collapse, CollapseProps } from "antd";
import { FileMainProps } from "@/types";
import { FileSettings } from "@/components/Configuration/FileProps/components/FileSettings.tsx";
import { CanvasSettings } from "@/components/Configuration/FileProps/components/CanvasSettings.tsx";

export function Drawing(props: FileMainProps) {
  useEffect(() => {
    props.getCanvasData();
  }, []);
  const panelStyle: React.CSSProperties = {
    borderRadius: 0,
  };

  const items: CollapseProps["items"] = [
    {
      key: "file",
      label: "文件",
      children: <FileSettings {...props} />,
      style: panelStyle,
    },
    {
      key: "canvas",
      label: "画布",
      children: <CanvasSettings {...props} />,
      style: panelStyle,
    },
  ];
  return (
    <>
      <Collapse
        style={{ border: "none", borderRadius: 0, borderColor: "#000000" }}
        items={items}
        defaultActiveKey={["file", "canvas"]}
      />
    </>
  );
}
